<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="BIG5"%>
<%@ page import="mo.org.cm309.shoppingcart.entity.Product, java.util.List" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "release-datatables/media/css/demo_page.css";
			@import "release-datatables/media/css/demo_table_jui.css";
			@import "css/black-tie/jquery-ui-1.9.0.custom.css";
			@import "release-datatables/media/css/ColReorder.css";
			@import "css/theme1.css";
			@import "css/style.css";
		</style>
		<link rel="stylesheet" href="css/theme1.css" type="text/css" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<script type="text/javascript" language="javascript" src="js/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.js"></script>
		<script type="text/javascript" language="javascript" src="release-datatables/media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" language="javascript" src="release-datatables/media/js/ColReorder.js"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var oTable = $('#example').dataTable( {
					"sDom": '<"H"Cfr>t<"F"ip>',
					"bJQueryUI": true,
					"bSortClasses": false,
					"aoColumns": [ 
						/* productId */		{ "bSearchable": false,
			                			 	  "bVisible":    false },
						/* productName */   null,
						/* Category */      null,
						/* Brand */  		null,
						/* Supplier */  	null,
						/* Description */  	null,
						/* Price */  		null,
						/* Discount */  	null,
						/* Stock */  		null,
						/* Quantity */    	null,
						/* Action */        null
					]
				} );
				
				oTable.$('td').hover( function() {
					var iCol = $('td', this.parentNode).index(this) % 5;
					$(oTable.$('tr')).addClass( 'highlighted' );
				}, function() {
					oTable.$('td.highlighted').removeClass('highlighted');
				} );


			} );
		</script>
		<script type="text/javascript" src="js/common.js"></script>
	</head>
	<body class="ex_highlight">
		
		<script type="text/javascript">
		
		(function(){
		  var bsa = document.createElement('script');
		     bsa.type = 'text/javascript';
		     bsa.async = true;
		     bsa.src = '//s3.buysellads.com/ac/bsa.js';
		  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
		})();
		
		  //setTimeout( function () {
		  //	if ( typeof _bsap != 'undefined' ) {
		  //		$('#header_advert>a').css('display', 'block');
		  //	}
		  //	else {
		  //		$('#donate_advert').click( function() {
		  //			window.location.href = "/donate";
		  //		} ).css('display', 'block');
		  //	}
		  //}, 3000 );
		</script>		
		<jsp:useBean id="cart" class="mo.org.cm309.shoppingcart.entity.Cart" scope="session"></jsp:useBean>
		<jsp:include page="sections/header.jsp" />	
		<div id="main">
		<div id="dt_example">
		<div id="container">
			<div id="demo">
			<h1>Shopping Cart</h1>
				<form method="post" action="checkOutServlet">
					<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
						<thead>
							<tr>
								<th>Product Id</th>
					   			<th>Product Name</th>
					   			<th>Category</th>
					   			<th>Brand</th>
					   			<th>Supplier</th>
					   			<th>Description</th>
					   			<th>Price</th>
					   			<th>Discount</th>
					   			<th>Stock</th>
					   			<th>Quantity</th>
					   			<th>Action</th>
							</tr>
						</thead>
						<tbody>
							<%  List<Product> products = cart.getProductList();
					   			for (Product product : products){%>
					   			<tr class="gradeU">
					   				<td name="productId"><%=product.getId()%></td>
					   				<td><%=product.getProductname()%></td>
					   				<td><%=product.getCategory()%></td>
					   				<td><%=product.getBrand()%></td>
					   				<td><%=product.getSupplier()%></td>
					   				<td><%=product.getDesc()%></td>
					   				<td><%=product.getPrice()%></td>
					   				<td><%=product.getDiscount()%></td>
					   				<td><%=product.getStock()%></td>
					   				<td><input id="quantity" name="quantity" type="number" min="1" value="<%=product.getQuantity()%>" style="width:30px"/></td>
					   				<td><a href="deleteCartServlet?productId=<%=product.getId()%>">delete</a></td>
					   			</tr>
					   		<%} %>
						</tbody>
						<tfoot>
							<tr>
								<th>Product Id</th>
					   			<th>Product Name</th>
					   			<th>Category</th>
					   			<th>Brand</th>
					   			<th>Supplier</th>
					   			<th>Description</th>
					   			<th>Price</th>
					   			<th>Discount</th>
					   			<th>Stock</th>
					   			<th>Quantity</th>
					   			<th>Action</th>
							</tr>
						</tfoot>
					</table>
					<table>	
						<tr>
							<td><input type="submit" id="userRegSubmitButton" class="submitButt" value="Check out" /></td>
							<td><input type="button" class="submitButt" value="Create New Account"  onClick="location.href='userRegistration.jsp'"/></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		</div>
		</div>
	</body>
</html>